// src/utils/remAdapter.ts
// import { throttle } from "lodash.throttle";
import { DESIGN_CONFIG, BREAKPOINTS, DesignPreset } from "../config/breakpoint";

// 获取当前适用的设计稿方案
const getCurrentPreset = (): DesignPreset => {
  const viewportWidth = document.documentElement.clientWidth;
  if (viewportWidth <= BREAKPOINTS[DesignPreset.MOBILE]) return DesignPreset.MOBILE;
  if (viewportWidth <= BREAKPOINTS[DesignPreset.TABLET]) return DesignPreset.TABLET;
  return DesignPreset.DESKTOP;
};

export const useMultiRemAdapter = () => {
  const calcFontSize = () => {
    const preset = getCurrentPreset();
    const { designWidth, baseFontSize } = DESIGN_CONFIG[preset];
    const clientWidth = document.documentElement.clientWidth;

    // 限制最大缩放比例（例：不超过设计稿2倍）
    const maxWidth = designWidth * 2;
    const validWidth = Math.min(clientWidth, maxWidth);

    const scale = validWidth / designWidth;
    document.documentElement.style.fontSize = `${baseFontSize * scale}px`;

    // 可选：添加data属性用于CSS媒体查询
    document.documentElement.setAttribute("data-design-preset", preset);
  };

  const init = () => {
    calcFontSize();
    window.addEventListener("resize", calcFontSize);
    window.addEventListener("orientationchange", calcFontSize);
  };

  const destroy = () => {
    window.removeEventListener("resize", calcFontSize);
    window.removeEventListener("orientationchange", calcFontSize);
  };

  return { init, destroy };
};
